<!--
 * @Author: qf
 * @Date: 2024-02-23 14:33:26
 * @LastEditors: qf
 * @LastEditTime: 2024-04-22 11:38:22
 * @Description: 财税咨询
-->
<template>
  <div class="banner">
    <div class="banner-title">
      <h3>财税咨询</h3>
      <h5>
        提供一站式专业化财税服务解决方案<br />
        帮助客户依法纳税，降低税务成本<br />
        实现纳税风险的最小化
      </h5>
      <div><span @click="show = true">立即咨询</span></div>
    </div>
    <img :src="imgUrl + 'ftx-bg.png'" alt="" />
  </div>
  <div class="part">
    <div class="part-title">
      <div>业务范围</div>
      <p>SCOPE OF BUSINESS</p>
    </div>
    <ul>
      <li v-for="(el, i) in arrData" :key="i">
        <img :src="el.img" alt="" />
        <div class="half-circle-wrapper">
          <div class="half-circle">{{ el.title }}</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="part">
    <div class="part-title">
      <div>我们的优势</div>
      <p>OUR ADVANTAGES</p>
    </div>
    <div class="advantages-bg">
      <div class="advantages-content">
        <div class="content-top">
          <div class="top-sub-title">
            <div class="sub-title-main left">税务合规</div>
            <div class="sub-title-description left">
              严格依据税法政策确保合规
            </div>
          </div>
          <el-image
            class="advantages-image"
            :src="`${imgUrl}ftx-advantage.png`"
          ></el-image>
          <div class="top-sub-title">
            <div class="sub-title-main">资金安全</div>
            <div class="sub-title-description">
              一流银行服务、多重技术保障资金安全
            </div>
          </div>
        </div>
        <div class="content-bottom">
          <div class="bottom-sub-title">
            <div class="sub-title-main left">专业团队</div>
            <div class="sub-title-description left">
              超10年税务筹划师团队<br />出具匹配度更高的方案
            </div>
          </div>
          <div class="bottom-sub-title">
            <div class="sub-title-main">收费明确</div>
            <div class="sub-title-description">
              合同明确资费<br />服务过程无任何隐形收费
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="part">
    <div class="part-title" style="margin-top: 60px">
      <div>流程服务</div>
      <p>PROCESS SERVICES</p>
    </div>
    <div class="process-container">
      <process-list
        v-for="(item, index) in processData"
        :key="index"
        :item="item"
      ></process-list>
    </div>
  </div>
  <div class="part">
    <div class="part-title">
      <div>常见问题</div>
      <p>COMMAND PROBLEM</p>
    </div>
    <ul class="common-questions-wrapper">
      <li
        class="common-questions-item"
        v-for="(el, i) in commonQuestions"
        :key="i"
      >
        <div class="common-questions-title">
          <i class="iconfont icon-icon-question-circle"></i>
          <span>{{ el.title }}</span>
        </div>
        <p class="common-questions-content">{{ el.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { arrData, processData, commonQuestions } from "./constants";
import processList from "./components/process-list.vue";
import { imgUrl } from "@/utils/common";
</script>

<style scoped lang="scss">
.banner {
  position: relative;
  .banner-title {
    position: absolute;
    top: 53%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: left;
    h3 {
      font-size: 60px;
      line-height: 60px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    h5 {
      font-weight: 400;
      font-size: 20px;
      line-height: 36px;
      margin-bottom: 20px;
    }
    p {
      display: inline-block;
      padding: 12px 16px;
      background: #809bc0;
      border-radius: 3px;
      font-size: 16px;
      line-height: 24px;
    }
    div {
      margin-top: 67px;
      span {
        cursor: pointer;
        display: inline-block;
        padding: 13px 50px;
        background-color: #1678ff;
        color: #fff;
        border-radius: 3px;
        font-weight: 400;
        font-size: 20px;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}

ul {
  display: flex;
  flex-wrap: wrap;
  width: 66.7%;
  margin: 20px auto 100px;
  justify-content: flex-start;

  li {
    height: 180px;
    margin: 0 70px 45px 0;
    box-sizing: border-box;
    flex: 0 0 calc((100% - 140px) / 3);
    border-radius: 8px;
    border: 1px solid #dfe1e6;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;

    &:nth-child(3n) {
      margin-right: 0;
    }

    img {
      width: 65px;
      height: 65px;
      margin-bottom: 20px;
    }
    .half-circle-wrapper {
      height: 63px;
      overflow: hidden;
    }
    div.half-circle {
      width: 173px;
      height: 173px;
      border-radius: 50% 50% 0 0;
      font-size: 18px;
      background: #f4f7fe;
      text-align: center;
      padding-top: 22px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #7a869a;
      line-height: 28px;
    }
  }
}

li.common-questions-item {
  flex: 0 0 calc((100% - 24px) / 2);
  margin: 0 24px 24px 0;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 36px;
  height: 220px;
  &:hover {
    box-shadow: 4px 4px 30px 8px rgba(192, 206, 217, 0.15);
  }

  &:nth-child(2n) {
    margin-right: 0;
  }

  &:nth-child(3n) {
    margin-right: 24px;
  }

  .common-questions-title {
    margin-bottom: 22px;
    i {
      font-size: 36px;
      color: #ff7d00;
      vertical-align: bottom;
    }
    span {
      display: inline-block;
      line-height: 36px;
      font-size: 24px;
      margin-left: 24px;
      font-weight: 600;
    }
  }

  .common-questions-content {
    font-size: 18px;
    padding: 0 60px;
    line-height: 30px;
  }
}
/* 我们的优势 */
.advantages-bg {
  width: 100%;
  height: 610px;
  background-color: #f2f8ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .advantages-content {
    margin-top: 70px;
  }
  .content-top {
    display: flex;
    justify-content: center;
  }
  .content-bottom {
    margin-top: 4px;
    display: flex;
    justify-content: center;
  }
  .advantages-image {
    width: 662px;
    height: 348px;
  }
  .top-sub-title {
    margin-top: 82px;
  }
  .top-sub-title + .advantages-image {
    margin-left: 16px;
  }
  .advantages-image + .top-sub-title {
    margin-left: 16px;
  }
  .sub-title-main {
    font-weight: 600;
    font-size: 24px;
    color: #1678ff;
    line-height: 28px;
  }
  .sub-title-description {
    margin-top: 12px;
    font-size: 16px;
    color: #7a869a;
    line-height: 24px;
  }
  .left {
    text-align: right;
  }
  .bottom-sub-title + .bottom-sub-title {
    margin-left: 252px;
  }
}
.process-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 100px;
}
</style>
